D3 主要是基於 SVG 做資料視覺化的，因此首先得先有一點對於 SVG 的基礎知識。

有在做設計的應該都知道 SVG 的特性：放大縮小不會失真。若你用文字編輯器打開 SVG 檔案，你會發現他跟html長得非常類似，實際上就是一種 XML 語言，能透過 javascript 與 css 改變樣式。

那麼以下就介紹 SVG 畫布以及幾個基礎的圖形：

SVG 畫布

<svg width="600" height="400"></svg>

要加入一個SVG畫布非常簡單，tag的名稱就是svg。這就是要把其他圖形放在裡面最外層的畫布。

長方形

<svg width="600" height="400" style="border: 1px solid black">
  <rect x="0" y="0" width="400" height="300" style="fill: #afafaf;"></rect>
</svg>

接下來我們在剛剛的畫布中加入一個長方形，tag名稱為rect，你能為他加上一些基礎樣式如長寬、顏色、位置等等，與css十分類似。需要注意的是svg的(0, 0)是左上那個角！

圓形

<svg width="600" height="400" style="border: 1px solid black">
  <circle cx="150" cy="150" r="100" fill="#afafaf"></circle>
</svg>

再來是圓形，你要為他定義的東西就多了一點，cx與cy分別代表的是圓心的x與y，r則代表半徑的長度。

直線

<svg width="600" height="400" style="border: 1px solid black">
  <line x1="10" y1="20" x2="130" y2="240" stroke="#afafaf" stroke-width="3"></line>
</svg>

line顧名思義就是直線，在這個範例中代表的是從(10, 20)畫到(130, 240)、寬度為3的灰色直線。

文字

<svg width="600" height="400" style="border: 1px solid black">
  <text x="100" y="200" font-size="24" fill="#afafaf" >Hello</text>
</svg>

svg當然也能加入文字，若在圖表上課可能是一些數字或者圖示的說明。

路徑

<svg width="600" height="400" style="border: 1px solid black">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="#afafaf" stroke-width="3" fill="none"/>
</svg>

幾乎所有的形狀都能使用路徑畫出來，會使用Illustrator的人一定對貝茲曲線或鋼筆工具不陌生，他們畫出的就是svg當中的路徑，透過加入路徑的參數我們就能畫出想要的形狀，不過一般人應該都不太能把想要畫的東西轉成這些數字，還是得依靠一些小工具產生。

會了以上幾種圖形以及svg的基本概念以後，基本上就能用D3畫出好看的圖表了，下一章將會講解該如何用d3來畫圖！